import React, { useEffect, useState } from 'react';
import './style.less';
import axios from 'axios';
import { Button, Table, Col, Pagination, Select } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import { ConfigProvider } from 'antd';
export default function Index() {
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '日计划编号',
      dataIndex: 'no',
      key: 'no',
    },
    {
      title: '日计划主题',
      dataIndex: 'theme',
      key: 'theme',
      // render: (_, con) => <a>{con.type}</a>,
    },
    {
      title: '计划类型',
      dataIndex: 'type',
      key: 'type',
    },
    {
      title: '计划状态',
      dataIndex: 'status',
      key: 'status',
      // render: (_, con) => (con.status ? '进行中' : '未开始'),
    },
    {
      title: '编制人员',
      dataIndex: 'person',
      key: 'person',
    },
    {
      title: '编制部门',
      dataIndex: 'dep',
      key: 'dep',
    },
    {
      title: '负责人',
      dataIndex: 'responsible',
      key: 'responsible',
    },
    {
      title: '参与人',
      dataIndex: 'participate',
      key: 'participate',
    },
    {
      title: '开始日期',
      dataIndex: 'startDate',
      key: 'startDate',
    },
    {
      title: '结束日期',
      dataIndex: 'endDate',
      key: 'endDate',
    },
    {
      title: '计划共享给谁',
      dataIndex: 'planSharing',
      key: 'planSharing',
    },
    {
      title: '',
      render: (_, con) => (
        <a style={{ display: con.dep === '总经办' ? '' : 'none' }}>修改</a>
      ),
    },
  ];
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [data, setdata] = useState([]);
  // 搜索
  const [] = useState(''); // 设计主题
  const [search_type, setType] = useState(''); // 计划类型
  const [search_status, setStatus] = useState(''); // 计划状态
  useEffect(() => {
    getUser();
  }, []);
  const getUser = async () => {
    let { data } = await axios.get(`http://localhost:3000/plan`);
    console.log(data, '数据，，，');
    setdata(data);
  };

  const onSelectChange = (newSelectedRowKeys) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const onChange = () => {};
  return (
    <div style={{ background: '#fff' }}>
      <div className="day_but">
        <Button size="small">新增</Button>
        <Button size="small">还原</Button>
        <Button size="small">打印</Button>
        <Button size="small">导入</Button>
        <Button size="small">导出</Button>
        <Button size="small">查看日志</Button>
      </div>
      <div>
        <div className="day_search" style={{ minHeight: '548px' }}>
          <label>计划主题：</label>
          <input
            type="text"
            className="inps"
            name=""
            id=""
            onChange={(e) => {}}
          />
          <label>计划类型：</label>
          <Select
            defaultValue="全部"
            style={{
              width: 120,
            }}
            onChange={(res) => {
              setType(res);
            }}
            options={[
              {
                value: '全部',
                label: '全部',
              },
              {
                value: '个人计划',
                label: '个人计划',
              },
              {
                value: '部门计划',
                label: '部门计划',
              },
              {
                value: '公司计划',
                label: '公司计划',
              },
            ]}
          />
          <label style={{ marginLeft: '20px' }}>计划状态：</label>
          <Select
            defaultValue="全部"
            style={{
              width: 120,
            }}
            onChange={(res) => {
              setStatus(res);
            }}
            options={[
              {
                value: '全部',
                label: '全部',
              },
              {
                value: '未开始',
                label: '未开始',
              },
              {
                value: '进行中',
                label: '进行中',
              },
              {
                value: '已完成',
                label: '已完成',
              },
            ]}
          />
          <Button size="small" className="sea_but">
            查询
          </Button>
          <div style={{ textAlign: 'center', lineHeight: '60px' }}>
            <span style={{ fontSize: '24px', color: '#222' }}>工作日计划</span>
          </div>
          <Table
            size="small"
            style={{ marginRight: '20px' }}
            columns={columns}
            rowKey={(record) => record.id}
            pagination={false}
            dataSource={data}
            rowSelection={rowSelection}
            scroll={{ x: '1900px', y: '380px' }}
          />
          <ConfigProvider locale={zh_CN}>
            <Pagination
              total={1}
              showTotal={(total) => `共有条 ${total} 数据`}
              onChange={onChange}
              showSizeChanger
              pageSizeOptions={[1, 3, 5, 7]}
            />
          </ConfigProvider>
        </div>
      </div>
    </div>
  );
}
